<template>
  <section class="main-content">

    <div class="section-cont swiper">
      <el-row class="section-container" :gutter="20">
        <el-col :span="19"><div class="grid-content">
          <template v-if="swiper.length > 0">
            <el-carousel style="margin-top:14px;" height="450px">
              <el-carousel-item v-for="item in swiper" v-bind:key="item">
                <div @click="urlto(item.url)" style="height:100%">
                  <el-image fit="scale-down"
                            :src="item.uri"
                            class="image"
                  />
                </div>
              </el-carousel-item>
            </el-carousel>
          </template>
        </div></el-col>
        <el-col :span="5">
          <div class="grid-content">
            <ul v-if="addArticleList.length>0" class="swiper-right">
              <li v-for="itemArticle in addArticleList" v-bind:key="itemArticle">
                <el-card :body-style="{ padding: '0' }" @click="urlto('article?id='+ itemArticle.id)">
                  <el-image fit="scale-down"
                      :src="itemArticle.img"
                      class="image"
                  />
                  <div style="padding: 0 14px 5px">
                    <span>{{ itemArticle.title }}</span>
                    <div>
                      <p class="card-des" :title="itemArticle.description">{{ itemArticle.description.substring(0,40) }}...</p>
                    </div>
                  </div>
                </el-card>
              </li>
            </ul>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="section-cont hot-arts mt-10">
      <el-row v-if="hotArticleList.length > 0" class="section-container" :gutter="20">
        <el-col v-for="item in hotArticleList" v-bind:key="item" :span="6">
          <div class="grid-content">
            <el-card :body-style="{ padding: '0' }" @click="urlto('article?id='+ item.id)">
              <el-image fit="scale-down"
                        :src="item.img"
                        class="image"
              />
              <div style="padding: 0 14px 5px">
                <div>
                  <p class="card-des">{{ item.title }}</p>
                </div>
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="section-cont ls-add mt-10">
      <el-row class="section-container" :gutter="20">
        <el-col :span="24">
          <div class="grid-content">
            <ul v-if="catList.length > 0">
              <li v-for="item in catList" v-bind:key="item" @click="urlto('category?id='+item.id)"><a><span>{{ item.title }}</span></a></li>
            </ul>
          </div>
        </el-col>
      </el-row>
    </div>

    <div v-if="mainArticleList.length > 0" class="section-cont main-con mt-10">
      <el-row class="section-container" align="middle" :gutter="20">
        <el-col v-for="item in mainArticleList" v-bind:key="item" class="mb-20" :span="6">
          <div class="grid-content">
            <el-card :body-style="{ padding: '0px' }" @click="urlto('article?id='+ item.id)">
              <div class="image" :style="'background-image: url(' + item.img +')'" ></div>
              <div class="image-text">
                <span>{{ item.title }}</span>
                <div>
                  <p class="card-des" :title="item.description">{{ item.description.substring(0,40) }}...</p>
                </div>
                <div>
                  <p class="card-des">{{ item.update_time }} <span class="f-r">{{ item.category.title }}</span></p>
                </div>
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </div>

  </section>
</template>
<script>
export default {

  components: {
  },
  data() {
    return {
      isused:1,
      ishot:1,
      istop:1,
      mainArticleList:[],
      swiper:sessionStorage.getItem('access-swiper')?JSON.parse(sessionStorage.getItem('access-swiper')):[],
      catList:sessionStorage.getItem('access-catList')?JSON.parse(sessionStorage.getItem('access-catList')):[],
      hotArticleList:sessionStorage.getItem('access-hotArticleList')?JSON.parse(sessionStorage.getItem('access-hotArticleList')):[],
      addArticleList:sessionStorage.getItem('access-addArticleList')?JSON.parse(sessionStorage.getItem('access-addArticleList')):[],
    }
  },
  watch:{

  },
  async created(){
    await this.getDataByApi();
  },
  methods: {
    async getDataByApi(){
      if(this.swiper.length === 0){
        await this.$API.home.getSwiper({isused:this.isused}).then(res => {
          if(res.message === "OK"){
            this.swiper = res.data
            sessionStorage.setItem('access-swiper',JSON.stringify(this.swiper))
          }else{
            this.$message.error('接口失效')
            return false;
          }
        })
      }
      if(this.catList.length === 0){
        await this.$API.home.getCatList().then(res => {
          if(res.message === "OK"){
            this.catList = res.data
            sessionStorage.setItem('access-catList',JSON.stringify(this.catList))
          }else{
            this.$message.error('接口失效')
            return false;
          }
        })
      }

      if(this.hotArticleList.length === 0){
        await this.$API.home.getHotArticle({istop:0,ishot:this.ishot,limit:4}).then(res => {
          if(res.message === "OK"){
            this.hotArticleList = res.data
            sessionStorage.setItem('access-hotArticleList',JSON.stringify(this.hotArticleList))
          }else{
            this.$message.error('接口失效')
            return false;
          }
        })
      }

      if(this.addArticleList.length === 0){
        await this.$API.home.getHotArticle({istop:this.istop,ishot:this.ishot,limit:2}).then(res => {
          if(res.message === "OK"){
            this.addArticleList = res.data
            sessionStorage.setItem('access-addArticleList',JSON.stringify(this.addArticleList))
          }else{
            this.$message.error('接口失效')
            return false;
          }
        })
      }

      await this.$API.home.getHotArticle({istop:this.istop,ishot:0,limit:8}).then(res => {
        if(res.message === "OK"){
          this.mainArticleList = res.data
        }else{
          this.$message.error('接口失效')
          return false;
        }
      })

    },
    paramsGet(key){
      const params = {};
      if(key.includes("&")){
        const mParams = key.split('&')
        for(const item in mParams){
          const temp = mParams[item].split('=')
          params[temp[0]] = temp[1]
        }
      }else{
        const temp = key.split('=')
        params[temp[0]] = temp[1]
      }
      return params;
    },

    urlto(key){
      console.log('jump:'+ key)
      if(key.includes("?")){
        const keyPath =  key.split('?')
        this.$router.push({name:keyPath[0],params:this.paramsGet(keyPath[1])}).catch(err => {
          console.log(err)
        })
      }else{
        this.$router.push({name:key}).catch(err => {
          console.log(err)
        })
      }
    }
  }
}
</script>

<style typeof="scss" scoped>
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.main-content{
  margin-top: 100px;
}
.main-content .section-cont{
  margin: auto;
  width: var(--web-width);
}
.main-content .section-container{
  display: flex;
  justify-content: space-between;
  margin: auto;
  width: var(--web-width);
  line-height: 30px;
  letter-spacing: -.03em;
  overflow:hidden;
}


.swiper ul.swiper-right li:first-child{
  margin-bottom:20px;
}
.swiper ul.swiper-right .image{
    max-height:160px;
}
.swiper ul.swiper-right li .card-des{
  font-size: 12px;
  line-height: 16px;
  margin: 0;
  color: #858383;
  margin-bottom: 10px;
}

.hot-arts .image{
  max-height:160px;
  width:100%;
  overflow: hidden;
}
.hot-arts .card-des{
  font-size: 12px;
  line-height: 16px;
  margin: 0;
  color: #858383;
  margin-bottom: 10px;
}

.ls-add ul{
  background: #dedede;
  border-radius: 4px;
  overflow: hidden;
}
.ls-add ul li{
  float: left;
  margin: 0 35px
}
.ls-add ul li a{
  color:#ffffff;
}
.ls-add ul li:hover a{
  color: var(--color-red)
}
.ls-add ul li a span{

}

.main-con{

}
.main-con .image{
  height:160px;
  width:100%;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.main-con .image-text{
  padding: 5px 14px 10px;
  overflow: hidden;
}
.main-con .image-text div p{
  font-size: 12px;
  line-height: 16px;
  margin: 0;
  color: #858383;
  margin-bottom: 10px;
}


</style>
